<template>
  <div
    v-loading="loading || uploadAnnexLoading"
    class="customer-detail-wrapper"
    element-loading-text="加载中..."
  >
    <div class="customer-detail">
      <div class="customer-info">
        <el-card class="box-card">
          <div class="card_user">
            <h-image
              :src="userInfo?.avatar || defaultAvatar"
              :show-del-btn="false"
              :width="100"
              :height="100"
              fit="contain"
            />
            <div class="basic-info">
              <div class="info">
                <div class="name">
                  <div class="label">客户名称：</div>
                  <div class="value">{{ userInfo.name }}</div>
                </div>
                <!-- <div class="phone">
                  <div class="label">账号：</div>
                  <div class="value">{{ userInfo.phone }}</div>
                </div> -->
              </div>
              <div class="tip">
                <h-status v-if="userInfo.blacklist" type="error">处于黑名单中禁止报单</h-status>
              </div>
            </div>
            <ul class="statistics">
              <li class="contact-product statistics-item">
                <el-icon class="icon" size="24">
                  <Check />
                </el-icon>
                <div class="txt">
                  <p class="num">{{ userInfo?.productNo }}</p>
                  <p class="title">关联产品</p>
                </div>
              </li>
              <li class="contact-order statistics-item">
                <el-icon class="icon" size="24">
                  <Check />
                </el-icon>
                <div class="txt">
                  <p class="num">{{ userInfo?.orderNo }}</p>
                  <p class="title">关联工单</p>
                </div>
              </li>
            </ul>
          </div>

          <div class="header">
            <h6>基本信息</h6>
          </div>
          <el-form label-width="90px" class="form_list">
            <el-form-item label="公司编号：">
              <span>{{ userInfo?.code }}</span>
            </el-form-item>
            <el-form-item label="信用额度：">
              <h-link @click="creditLimitModalVisible = true">
                <template v-if="userInfo.creditLimitType === 1">不限制</template>
                <template v-if="userInfo.creditLimitType === 2">现付</template>
                <template v-if="userInfo.creditLimitType === 3"
                  >￥{{ userInfo.creditLimit.toFixed(2) }}</template
                >
              </h-link>
            </el-form-item>
            <el-form-item label="结算期限：">
              <h-link @click="creditLimitModalVisible = true"
                >{{ userInfo.settlementDeadline }}天</h-link
              >
            </el-form-item>
            <el-form-item label="应收账款："
              >￥{{ userInfo.accountsReceivable.toFixed(2) }}
            </el-form-item>
            <!-- <el-form-item label="公司分类：">
              <span>{{ userInfo?.userType }}</span>
            </el-form-item>
            <el-form-item label="知识库权限：">
              <template v-if="userInfo?.selectKnowledgeAuthor">按公司分类权限查看</template>
              <template v-else>查看所有</template>
            </el-form-item> -->
            <el-form-item label="绑定手机：">
              <span>{{ userInfo?.phone }}</span>
            </el-form-item>
            <!-- <el-form-item label="注册时间：">
              <span>{{ userInfo?.createTime }}</span>
            </el-form-item>
            <el-form-item label="更新时间：">
              <span>{{ userInfo?.updateTime }}</span>
            </el-form-item> -->
            <el-form-item label="最后登录：">
              <span>{{ userInfo?.lastLoginTime }}</span>
            </el-form-item>
          </el-form>
          <div class="btn_edit">
            <h-plain-button v-permission="'user_edit'" @click="editInfo">编辑</h-plain-button>
            <h-plain-button
              v-if="userInfo.blacklist"
              v-permission="'user_black'"
              @click="onUpdateBlackListSet(false)"
              >解除黑名单</h-plain-button
            >
            <h-plain-button v-else v-permission="'user_black'" @click="onUpdateBlackListSet(true)"
              >设置为黑名单</h-plain-button
            >
          </div>
        </el-card>
      </div>

      <!-- 联系人列表信息 -->
      <div class="body">
        <el-tabs v-model="activeName" class="tabs_height">
          <el-tab-pane label="联系人" name="first">
            <div class="contact_person">
              <div class="header">
                <div class="btn_group">
                  <HPlainButton v-permission="'user_addContact'" @click.stop="addLineData"
                    >新增联系人</HPlainButton
                  >
                  <HPlainButton
                    v-permission="'user_deleteContact'"
                    :disabled="userContactBatchDelBtn"
                    type="error"
                    @click="deleAll"
                  >
                    批量删除
                  </HPlainButton>
                </div>
                <div class="search">
                  <el-input
                    v-model.trim="name"
                    placeholder="客户名称"
                    clearable
                    class="input-width mr5"
                    @keyup.enter="getList"
                    @clear="getList"
                  />
                  <el-input
                    v-model.trim="telphone"
                    placeholder="公司手机号"
                    clearable
                    class="input-width mr5"
                    @keyup.enter="getList"
                    @clear="getList"
                  />
                  <HButton type="primary" @click="getList">
                    <el-icon>
                      <Search />
                    </el-icon>
                    搜索
                  </HButton>
                </div>
              </div>
              <div class="table">
                <el-table
                  ref="selfDom"
                  stripe
                  resizable
                  :border="true"
                  :data="selfData"
                  height="100%"
                  @selection-change="getCheckbox"
                >
                  <!-- 选择 -->
                  <el-table-column
                    type="selection"
                    width="35px"
                    :selectable="checkDisable"
                    align="center"
                  />

                  <!-- 序号 -->
                  <el-table-column label="序号" type="index" width="50px" fixed :align="'center'" />

                  <!-- 联系人姓名 -->
                  <el-table-column prop="name" label="联系人姓名" min-width="140px">
                    <template #default="item">
                      <div v-if="item.row.isEditUserContact">
                        <el-input
                          v-model.trim="item.row.username"
                          clearable
                          placeholder="请输入名称"
                        />
                      </div>
                      <div v-else>
                        {{ item.row.username }}
                      </div>
                    </template>
                  </el-table-column>

                  <!-- 联系人手机号 -->
                  <el-table-column prop="phone" label="联系人手机号" width="110">
                    <template #default="item">
                      <div v-if="item.row.isEditUserContact">
                        <el-input
                          v-model.trim="item.row.phone"
                          placeholder="请输入手机号"
                          maxlength="11"
                          clearable
                        />
                      </div>
                      <div v-else>
                        {{ item.row.phone }}
                      </div>
                    </template>
                  </el-table-column>

                  <!-- 主要联系人 -->
                  <el-table-column prop="mainContact" label="主要联系人" width="90">
                    <template #default="item">
                      <div style="display: flex; align-items: center; gap: 5px">
                        <el-switch
                          v-model="item.row.mainContact"
                          :disabled="item.row.isMainUser ? true : !item.row.isEditUserContact"
                        />
                        <span v-if="item.row.mainContact">是</span>
                        <span v-else>否</span>
                      </div>
                    </template>
                  </el-table-column>

                  <!-- 邮箱 -->
                  <el-table-column prop="email" label="邮箱" width="180">
                    <template #default="item">
                      <div v-if="item.row.isEditUserContact">
                        <el-input
                          v-model.trim="item.row.email"
                          placeholder="请输入邮箱"
                          clearable
                        />
                      </div>
                      <div v-else>
                        {{ item.row.email }}
                      </div>
                    </template>
                  </el-table-column>

                  <!-- 联系地区 -->
                  <el-table-column
                    show-overflow-tooltip
                    prop="province"
                    label="联系地区"
                    width="240"
                  >
                    <template #default="item">
                      <div v-if="item.row.isEditUserContact">
                        <SingleAddress
                          ref="addrEditRef"
                          :address="{
                            province: item.row.province,
                            city: item.row.city,
                            area: item.row.area,
                            town: item.row.town,
                          }"
                        />
                      </div>
                      <span v-else>
                        {{
                          [item.row.province, item.row.city, item.row.area, item.row.town]
                            .filter((o) => o)
                            .join('/')
                        }}
                      </span>
                    </template>
                  </el-table-column>

                  <!-- 详细地址 -->
                  <el-table-column
                    show-overflow-tooltip
                    prop="address"
                    label="详细地址"
                    width="220"
                  >
                    <template #default="item">
                      <div v-if="item.row.isEditUserContact">
                        <el-input
                          v-model.trim="item.row.address"
                          clearable
                          placeholder="请输入详细地址"
                          maxlength="200"
                        />
                      </div>
                      <span v-else>
                        {{ item.row.address }}
                      </span>
                    </template>
                  </el-table-column>

                  <!-- 操作 -->
                  <el-table-column label="操作" fixed="right" width="90">
                    <template #default="item">
                      <el-space :size="0" :spacer="spacer">
                        <HLink
                          v-if="!item.row.isEditUserContact"
                          v-permission="'user_editContact'"
                          @click.stop="onUserContainTableEdit(item.row)"
                          >编辑
                        </HLink>
                        <HLink
                          v-if="!item.row.isEditUserContact && !item.row.isMainUser"
                          v-permission="'user_deleteContact'"
                          type="error"
                          @click.stop="deleteLineData(item.$index, item.row)"
                          >删除</HLink
                        >
                      </el-space>
                      <el-space v-if="item.row.isEditUserContact" :size="0" :spacer="spacer">
                        <HLink @click.stop="onUserContainTableSave(item.$index, item.row)"
                          >保存</HLink
                        >
                        <HLink @click.stop="onUserContainTableCancel(item.$index, item.row)"
                          >取消</HLink
                        >
                      </el-space>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div class="pagination">
                <Pagination
                  ref="paginDom"
                  :list_total="total"
                  @size-change="getList"
                  @current-change="getList(false)"
                />
              </div>
            </div>
          </el-tab-pane>

          <!-- 关联设备 -->
          <el-tab-pane label="关联设备" name="second">
            <div class="connect_product">
              <div class="table">
                <el-table
                  v-if="activeName == 'second'"
                  :border="true"
                  :data="UserRelationCodeGoodsList?.rows || []"
                  resizable
                  stripe
                  height="100%"
                >
                  <!-- 序号 -->
                  <el-table-column
                    label="序号"
                    width="50"
                    type="index"
                    :align="'center'"
                    fixed="left"
                  />

                  <!-- 设备编号 -->
                  <el-table-column
                    prop="goodsCode"
                    show-overflow-tooltip
                    label="设备编号"
                    width="180"
                  />

                  <!-- 序列号 -->
                  <el-table-column prop="code" show-overflow-tooltip label="序列号" width="140" />

                  <!-- 设备名称 -->
                  <el-table-column
                    prop="goodsName"
                    show-overflow-tooltip
                    label="设备名称"
                    width="120"
                  />

                  <!-- 设备型号 -->
                  <el-table-column
                    prop="goodsModel"
                    show-overflow-tooltip
                    label="设备型号"
                    width="120"
                  />

                  <!-- 设备规格 -->
                  <el-table-column
                    prop="goodsSpecName"
                    show-overflow-tooltip
                    label="设备规格"
                    width="120"
                  />

                  <!-- 设备品牌 -->
                  <el-table-column
                    prop="goodsBrand"
                    show-overflow-tooltip
                    label="设备品牌"
                    width="120"
                  />

                  <!-- 设备分类 -->
                  <el-table-column
                    prop="goodsType"
                    show-overflow-tooltip
                    label="设备分类"
                    width="100"
                  />

                  <!-- 出库时间 -->
                  <el-table-column
                    prop="outStoreTime"
                    show-overflow-tooltip
                    label="出库时间"
                    width="140"
                  />

                  <!-- 质保到期时间 -->
                  <el-table-column
                    prop="warrantyEndTime"
                    show-overflow-tooltip
                    label="质保到期时间"
                    width="140"
                  />

                  <!-- 是否为黑名单 -->
                  <el-table-column
                    prop="blackList"
                    show-overflow-tooltip
                    label="是否为黑名单"
                    width="100"
                    fixed="right"
                    :align="'center'"
                  >
                    <template #default="{ row }">
                      <div class="flex justify-center">
                        <h-status v-if="row.blacklist" type="error">是</h-status>
                        <h-status v-else>否</h-status>
                      </div>
                    </template>
                  </el-table-column>

                  <!-- 状态 -->
                  <el-table-column
                    prop="status"
                    label="状态"
                    width="70"
                    fixed="right"
                    :align="'center'"
                  >
                    <template #default="scope">
                      <HStatus v-if="scope.row.status !== 2" type="info">禁用</HStatus>
                      <HStatus v-else>启用</HStatus>
                    </template>
                  </el-table-column>

                  <!-- 操作 -->
                  <el-table-column
                    v-if="!userInfo.blacklist"
                    prop="operate"
                    label="操作"
                    width="110"
                    fixed="right"
                    :align="'center'"
                  >
                    <template #default="{ row }">
                      <h-link
                        v-if="row.blacklist"
                        v-permission="'user_goodsBlack'"
                        @click="handleGoodUpdateBlackListSet(row.id, false)"
                        >解除黑名单</h-link
                      >
                      <h-link
                        v-else
                        v-permission="'user_goodsBlack'"
                        @click="handleGoodUpdateBlackListSet(row.id, true)"
                        >设置为黑名单</h-link
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination">
                <Pagination
                  ref="goodListPaginationInstance"
                  :list_total="Number(UserRelationCodeGoodsList?.total || 0)"
                  @size-change="getUserRelationCodeGoodsListFun"
                  @current-change="getUserRelationCodeGoodsListFun"
                />
              </div>
            </div>
          </el-tab-pane>

          <!-- 关联工单 -->
          <el-tab-pane label="关联工单" name="third">
            <div class="connect_order">
              <div class="table">
                <el-table
                  v-if="activeName == 'third'"
                  :border="true"
                  :data="UserRelationOrderList?.rows || []"
                  resizable
                  stripe
                  height="100%"
                >
                  <template #empty>
                    <el-empty description="暂无数据" />
                  </template>

                  <!-- 序号 -->
                  <el-table-column
                    label="序号"
                    width="50"
                    type="index"
                    :align="'center'"
                    fixed="left"
                  />

                  <!-- 工单编号 -->
                  <el-table-column
                    prop="workNo"
                    show-overflow-tooltip
                    label="工单编号"
                    width="180"
                  />

                  <!-- 设备名称 -->
                  <el-table-column
                    show-overflow-tooltip
                    label="设备名称"
                    prop="goodsName"
                    min-width="140"
                  />

                  <!-- 设备规格 -->
                  <el-table-column show-overflow-tooltip label="设备规格" prop="goodsSpecName" />

                  <!-- 设备分类 -->
                  <el-table-column
                    show-overflow-tooltip
                    label="设备分类"
                    prop="goodsType"
                    width="100"
                  />

                  <!-- 创建时间 -->
                  <el-table-column
                    prop="createTime"
                    show-overflow-tooltip
                    label="创建时间"
                    width="128"
                  />

                  <!-- 完成时间 -->
                  <el-table-column
                    prop="endTime"
                    show-overflow-tooltip
                    label="完成时间"
                    width="128"
                  />

                  <!-- 状态 -->
                  <el-table-column
                    prop="status"
                    label="状态"
                    width="118"
                    fixed="right"
                    :align="'center'"
                  >
                    <template #default="scope">
                      <div class="flex_justify_center">
                        <HStatus v-if="scope.row.status === 1" type="warning">待派单</HStatus>
                        <HStatus v-if="scope.row.status === 2" type="warning">待部门确认</HStatus>
                        <HStatus v-if="scope.row.status === 3" type="warning">处理中</HStatus>
                        <HStatus v-if="scope.row.status === 4" type="success">已完成</HStatus>
                        <HStatus v-if="scope.row.status === 5" type="info">已取消</HStatus>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination">
                <Pagination
                  ref="paginationOrder"
                  :list_total="Number(UserRelationOrderList?.total || 0)"
                  @size-change="getUserRelationOrderListFun"
                  @current-change="getUserRelationOrderListFun"
                />
              </div>
            </div>
          </el-tab-pane>

          <!-- 公司附件 -->
          <!-- <el-tab-pane label="公司附件" name="fourth">
            <div class="customer_annex">
              <div class="header">
                <p class="title">上传附件(点击上传图片或者文件)</p>
                <div class="btn_group">
                  <HPlainButton type="primary" @click="annexSaveSubmit">保存</HPlainButton>
                  <HButton @click="onCancel"> 取消 </HButton>
                </div>
              </div>
              <ul class="files">
                <li v-for="(it, index) in fileList" :key="index" class="file">
                  <h-image
                    v-if="
                      (it.name
                        ? it.name
                        : it.path.split('/')[it.path.split('/').length - 1]
                      ).replace(/.+\./, '') == 'pdf'
                    "
                    :width="80"
                    :height="50"
                    :src="pdf"
                    :is-show-img-preview="false"
                    @preview="lookFile(it.path, '附件')"
                    @del="deleteItem(index)"
                  />
                  <h-image
                    v-else
                    :width="80"
                    :height="50"
                    :src="it.path"
                    :padding="4"
                    @del="deleteItem(index)"
                  />
                  <h-tooltip-text
                    :max-width="80"
                    :text="it.name ? it.name : it.path.split('/')[it.path.split('/').length - 1]"
                    :height="16"
                  >
                    <div class="file_name">{{
                      it.name ? it.name : it.path.split('/')[it.path.split('/').length - 1]
                    }}</div>
                  </h-tooltip-text>
                </li>
                <el-upload
                  v-if="fileList.length < 20"
                  :auto-upload="false"
                  drag
                  action="#"
                  accept="image/*,.pdf"
                  multiple
                  :show-file-list="false"
                  :on-change="handleChange"
                >
                  <el-icon color="#007cff" size="24">
                    <upload-filled />
                  </el-icon>
                </el-upload>
              </ul>
            </div>
          </el-tab-pane> -->
          <!-- <el-tab-pane label="知识库" name="knowledge">
            <div class="known_storeroom">
              <div class="header">
                <div class="visible_role">
                  <div>知识库查看权限:</div>
                  <el-radio-group
                    v-model="selectKnowledgeAuthor"
                    class="radio_container"
                    @change="onUpdateSelectKnowledgeAuthor"
                  >
                    <el-radio :value="false" size="large">查看所有</el-radio>
                    <el-radio :value="true" size="large">按公司分类权限查看</el-radio>
                  </el-radio-group>
                </div>

                <HPlainButton @click="openEditUserType">编辑公司分类</HPlainButton>
              </div>
              <template v-if="selectKnowledgeAuthor">
                <div class="table">
                  <el-table :data="knowledgeTableData" border height="100%">
                    <el-table-column
                      label="序号"
                      width="50"
                      type="index"
                      :align="'center'"
                      fixed="left"
                    />
                    <el-table-column prop="userType" label="公司分类" min-width="110" />
                    <el-table-column prop="name" label="知识库类型权限" min-width="110" />
                    <el-table-column prop="createTime" label="创建时间" width="150" />
                    <el-table-column prop="updateTime" label="更新时间" width="150" />
                    <el-table-column label="操作" width="240" fixed="right">
                      <template #default="scope">
                        <el-space :size="0" :spacer="spacer">
                          <HLink @click="viewDetails(scope.row.id, 1)">说明书详情</HLink>
                          <HLink @click="viewDetails(scope.row.id, 2)">故障库详情</HLink>
                          <HLink @click="viewDetails(scope.row.id, 3)">视频详情</HLink>
                        </el-space>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </div>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>

    <!-- 文件查看 -->
    <h-dialog v-model="dialogContract" :title="`查看${file.type}`" :width="800">
      <iframe
        :src="`${file.file}`"
        width="100%"
        height="100%"
        style="height: 500px"
        frameborder="0"
      ></iframe>
    </h-dialog>

    <!-- 编辑公司弹窗 -->
    <h-dialog v-model="addDialog" :loading="addLoading" :title="userForm.title">
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="rules"
        label-position="top"
        inline-message
        class="modal_form_content"
      >
        <el-form-item label="账号名称" prop="name">
          <el-input v-model.trim="userForm.name" placeholder="请输入客户名称" clearable />
        </el-form-item>

        <el-form-item label="公司账号" prop="phone">
          <el-input
            v-model.trim="userForm.phone"
            placeholder="请输入公司手机号"
            clearable
            maxlength="11"
          />
        </el-form-item>

        <!-- <el-form-item label="公司级别" prop="levelId">
          <el-select
            v-model="userForm.levelId"
            placeholder="公司级别"
            :loading="getLevelOptionsLoading"
          >
            <template #header>
              <div class="select_header">
                <el-input v-model.trim="getLevelOptionsKeyword" @keyup.enter="getLevelOptions" />
                <h-plain-button @click="getLevelOptions">搜索</h-plain-button>
              </div>
            </template>
            <el-option
              v-for="item in levelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              @click="changeLevelId(item)"
            />
          </el-select>
        </el-form-item> -->

        <el-form-item label="公司分类" prop="userTypeId">
          <el-select
            v-model="userForm.userTypeId"
            placeholder="公司分类"
            :loading="getTypeOptionsLoading"
          >
            <template #header>
              <div class="select_header">
                <el-input v-model.trim="getTypeOptionsKeyword" @keyup.enter="getTypeOptions" />
                <h-plain-button @click="getTypeOptions">搜索</h-plain-button>
              </div>
            </template>
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              @click="changeUserTypeId(item)"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="公司编号">
          <el-input v-model.trim="userForm.code" placeholder="如无编号系统自动生成" clearable />
        </el-form-item>

        <el-form-item label="公司状态" class="same_line">
          <div class="switch_container">
            <el-switch v-model="userForm.status" />
            <span v-if="userForm.status">启用</span>
            <span v-else>禁用</span>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <h-button type="primary" is-modal @click="saveData(userFormRef)">保存</h-button>
        <h-button is-modal @click="onEditCustomerModalCancelClick">取消</h-button>
      </template>
    </h-dialog>

    <!-- 查看说明书 故障 视频 弹窗 -->
    <h-dialog
      v-model="lookTypeDialog"
      :width="900"
      :title="lookType == 1 ? '查看说明书' : lookType == 2 ? '查看故障库' : '查看视频'"
      :loading="getKnowledgeDetailLoading"
    >
      <div v-if="lookTypeDataList.length > 0" class="look_type">
        <template v-if="lookType == 1">
          <div v-for="(i, index) in lookTypeDataList" :key="i.id" class="look_item">
            <div class="look_name">({{ index + 1 }})&nbsp;{{ i.name }}</div>
            <div class="look_img">
              <h-image
                :src="i.image"
                :height="62.5"
                :preview-src-list="lookTypeDataList.map((item) => item.image)"
                fit="contain"
                :initial-index="index"
                :show-del-btn="false"
              />
            </div>
          </div>
        </template>
        <template v-if="lookType == 2">
          <div v-for="(i, index) in lookTypeDataList" :key="i.id" class="look_item">
            <div class="look_name">({{ index + 1 }})&nbsp;{{ i.name }}</div>
            <div class="look_img">解决方法：{{ i.solution }}</div>
            <div class="look_img">备注：{{ i.content }}</div>
          </div>
        </template>
        <template v-if="lookType == 3">
          <div v-for="(i, index) in lookTypeDataList" :key="i.id" class="look_item">
            <div class="look_name">({{ index + 1 }})&nbsp;{{ i.name }}</div>
            <div class="look_img">
              <h-image
                :src="i.image"
                :height="62.5"
                :preview-src-list="lookTypeDataList.map((item) => item.image)"
                fit="contain"
                :show-del-btn="false"
              />
            </div>
          </div>
        </template>
      </div>
      <el-empty
        v-else
        :description="lookType == 1 ? '暂无说明书' : lookType == 2 ? '暂无故障库' : '暂无视频'"
      />
    </h-dialog>
    <el-dialog title :visible="isShow" width="70%" @close="closeDialog">
      <video :src="videoUrl" controls autoplay class="video" width="100%"></video>
    </el-dialog>

    <!-- 编辑公司分类弹窗 -->
    <h-dialog v-model="usertypeDialogVisible" title="编辑公司分类" :loading="saveCustomerLoading">
      <el-form
        ref="userFormRef_change"
        :model="userForm"
        label-position="top"
        class="modal_form_content"
      >
        <el-form-item label="公司分类">
          <el-select v-model="userTypeId" placeholder="公司分类" :loading="getTypeOptionsLoading">
            <template #header>
              <div class="select_header">
                <el-input v-model.trim="getTypeOptionsKeyword" @keyup.enter="getTypeOptions" />
                <h-plain-button @click="getTypeOptions">搜索</h-plain-button>
              </div>
            </template>
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              @click="changeUserType(item)"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <HButton is-modal type="primary" @click="saveDataChangeType">保存</HButton>
        <HButton is-modal @click="usertypeDialogVisible = false"> 取消 </HButton>
      </template>
    </h-dialog>

    <!-- 信用额度弹窗 -->
    <credit-limit
      v-if="userInfo.id"
      v-model="creditLimitModalVisible"
      :user-ids="[userInfo.id]"
      :credit-limit="userInfo && userInfo.creditLimitType === 1 ? 0 : userInfo.creditLimit"
      :settlement-dead-line="userInfo ? userInfo.settlementDeadline : 0"
      @update="getInfo"
    />
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ElDivider, ElMessage, ElMessageBox } from 'element-plus'
  import { ref, onMounted, reactive, watch, Ref, h } from 'vue'
  import { useRoute } from 'vue-router'
  import { UploadFilled, Check } from '@element-plus/icons-vue'
  import type { UploadProps, UploadFile, FormInstance } from 'element-plus'
  import { phone } from '@/utils/validate'
  import SingleAddress from '../../../components/address/singleAddress.vue'
  import {
    levelPageSelect,
    typePageSelect,
    addUser,
    getUserInfo,
    getUserContact,
    saveUserContact,
    deleteContact,
    changeContact,
    updateSelectKnowledgeAuthor,
    getSelectKnowledgeAuthorList,
    getUserRelationOrderList,
    getUserRelationCodeGoodsList,
    getUserAnnex,
    annexSave,
    getInstructionBook,
    getFailt,
    getVideo,
  } from '@/api/users'
  import { userAnnexUpload } from '@/api/upload'
  import { AxiosPromise } from 'axios'
  import pdf from '@/assets/image/pdf.png'
  import defaultAvatar from '@/assets/image/default_avatar.png'
  import routeComponentName from '@/config/route-component-name'
  import {
    useUpdateCustomerBlackListSet,
    useUpdateGoodBlackListSet,
  } from '@/services/pages/customer/useCustomer'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import CreditLimit from '@/components/pages/user/detail/credit-limit/CreditLimit.vue'
  import { verifyPhone } from '@/utils/validate'

  const { updateSet: updateBlackListSet } = useUpdateCustomerBlackListSet()
  const { updateSet: updateGoodBlackListSet } = useUpdateGoodBlackListSet()

  defineOptions({
    name: routeComponentName.customer.customerDetail,
  })

  // 间距组件的间隔符
  const spacer = h(ElDivider, { direction: 'vertical' })

  // 设备列表分页组件实例
  const goodListPaginationInstance = ref<InstanceType<typeof Pagination> | null>(null)

  // 信用额度弹窗显示状态
  const creditLimitModalVisible = ref(false)

  const route = useRoute()
  const activeName = ref('first')
  const addDialog = ref(false)
  const loading = ref(false)
  const selectKnowledgeAuthor = ref(false) // 是否根据权限查看知识库：false-查看所有，true-根据权限查看
  const usertypeDialogVisible = ref(false) // 公司分类编辑弹窗
  const userTypeId = ref('') // 公司分类ID
  const userType = ref()
  const paginationOrder = ref()
  const knowledgeTableData = ref([])

  // 公司信息
  const userInfo = ref<CustomerDetail>({
    account: '',
    address: '',
    area: '',
    avatar: '',
    blacklist: false,
    city: '',
    code: '',
    createTime: '',
    email: '',
    id: '',
    lastLoginTime: '',
    level: '',
    levelId: '',
    money: 0,
    name: '',
    nickname: '',
    orderNo: '',
    phone: '',
    productNo: '',
    province: '',
    selectKnowledgeAuthor: false,
    status: 0,
    town: '',
    updateTime: '',
    userType: '',
    userTypeId: '',
    accountsReceivable: 0,
    creditLimit: 0,
    creditLimitType: 1,
    settlementDeadline: 0,
  })

  const addrEditRef = ref()
  const userContactBatchDelBtn = ref(true) // 联系人批量删除按钮
  const delAnnexIds = ref([]) //图片删除的Id
  const userFormRef_change = ref()

  /**
   * 获取公司账号信息
   */
  const getInfo = async () => {
    loading.value = true
    const res = await getUserInfo(route.params.id as string)
    userInfo.value = res.data.data.row
    userForm.addrs = {
      province: res.data.data.row.province,
      city: res.data.data.row.city,
      area: res.data.data.row.area,
      town: res.data.data.row.town,
    }
    userForm.address = res.data.data.row.address
    loading.value = false
    userTypeId.value = userInfo.value?.userTypeId === '0' ? '' : userInfo.value?.userTypeId
    userType.value = userInfo.value?.userType
    selectKnowledgeAuthor.value = userInfo.value?.selectKnowledgeAuthor
  }

  /**
   * 点击加入黑名单时触发
   */
  const onUpdateBlackListSet = (isJoinBlackList: boolean) => {
    ElMessageBox({
      title: '提示',
      message: isJoinBlackList ? '确定要加入黑名单？' : '确定要解除黑名单？',
      showCancelButton: true,
      type: isJoinBlackList ? 'error' : 'warning',
      autofocus: false,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          const res = await updateBlackListSet([userInfo.value.id], isJoinBlackList)
          instance.confirmButtonLoading = false
          instance.cancelButtonLoading = false
          if (res.code === 20000) {
            HMessage.success('更新成功')
            getInfo()
            if (activeName.value === 'second') {
              getUserRelationCodeGoodsListFun()
            }
            done()
            return
          }
          return
        }

        done()
      },
    })
  }

  /**
   * 设备列表设置黑名单/解除黑名单点击时触发
   * @param id -
   */
  const handleGoodUpdateBlackListSet = (id: string, isJoinBlackList: boolean) => {
    ElMessageBox({
      title: '提示',
      message: isJoinBlackList ? '确定将该设备加入黑名单？' : '确定解除该设备黑名单？',
      type: isJoinBlackList ? 'error' : 'warning',
      showCancelButton: true,
      autofocus: false,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          const res = await updateGoodBlackListSet(id, isJoinBlackList)
          instance.confirmButtonLoading = false
          instance.cancelButtonLoading = false
          if (res.code === 20000) {
            HMessage.success('更新成功')
            getUserRelationCodeGoodsListFun()
            done()
            return
          }
          return
        }
        done()
      },
    })
  }

  watch(activeName, (n) => {
    switch (n) {
      case 'first':
        getList()
        break
      case 'second':
        getUserRelationCodeGoodsListFun()
        break
      case 'third':
        getUserRelationOrderListFun()
        break
      case 'fourth':
        getUserFilt()
        break
      case 'knowledge':
        getKnowledgeAuthorList()
        break
    }
  })
  function closeDialog() {
    // 关闭弹框
    isShow.value = false
    videoUrl.value = '' // 清空数据 关闭视频播放
  }
  // 查看 1说明书 2故障库 3视频
  const lookType = ref()
  const lookTypeDataList = ref()
  const lookTypeDialog = ref(false)
  const videoUrl = ref()
  const isShow = ref(false)

  const getKnowledgeDetailLoading = ref(false)
  const viewDetails = (id, type) => {
    lookTypeDialog.value = true
    lookType.value = type
    lookTypeDataList.value = []
    switch (type) {
      case 1:
        getKnowledgeDetailLoading.value = true
        getInstructionBook(id).then((res) => {
          getKnowledgeDetailLoading.value = false
          if (!res) {
            return
          }
          if (res.data.success) {
            lookTypeDataList.value = res.data.data.row
          } else {
            ElMessage({
              message: res.data.message,
              type: 'error',
              duration: 5000,
              plain: true,
              showClose: true,
            })
          }
        })
        break
      case 2:
        getKnowledgeDetailLoading.value = true
        getFailt(id).then((res) => {
          getKnowledgeDetailLoading.value = false
          if (!res) {
            return
          }
          if (res.data.success) {
            lookTypeDataList.value = res.data.data.row
          } else {
            ElMessage({
              message: res.data.message,
              type: 'error',
              duration: 5000,
              plain: true,
              showClose: true,
            })
          }
        })
        break
      case 3:
        getKnowledgeDetailLoading.value = true
        getVideo(id).then((res) => {
          getKnowledgeDetailLoading.value = false
          if (!res) {
            return
          }
          if (res.data.success) {
            lookTypeDataList.value = res.data.data.row
          } else {
            ElMessage({
              message: res.data.message,
              type: 'error',
              duration: 5000,
              plain: true,
              showClose: true,
            })
          }
        })
        break
    }
  }

  onMounted(() => {
    getInfo()
    getList()
  })

  // 下拉数据
  const levelOptions = ref([]) // 级别
  const typeOptions = ref([]) // 分类

  // 编辑公司分类弹窗
  const openEditUserType = async () => {
    getLevelOptions()
    getTypeOptions()
    usertypeDialogVisible.value = true
  }

  const changeUserType = (item) => {
    userType.value = item.name
  }
  // 保存户分类弹窗
  const saveCustomerLoading = ref(false)
  const saveDataChangeType = () => {
    saveCustomerLoading.value = true
    const data = {
      address: userInfo.value.address,
      area: userInfo.value.area,
      city: userInfo.value.city,
      code: userInfo.value.code,
      email: userInfo.value.email,
      id: userInfo.value.id,
      level: userInfo.value.level,
      levelId: userInfo.value.levelId,
      name: userInfo.value.name,
      phone: userInfo.value.phone,
      province: userInfo.value.province,
      status: userInfo.value.status,
      town: userInfo.value.town,
      userType: userType.value,
      userTypeId: userTypeId.value,
    }
    addUser(data).then((res: { data: { success: boolean; message: any } }) => {
      saveCustomerLoading.value = false
      ElMessage({
        message: res.data.message,
        type: res.data.success ? 'success' : 'error',
        duration: 5000,
        plain: true,
        showClose: true,
      })
      if (res.data.success) {
        usertypeDialogVisible.value = false
        getInfo()
        getKnowledgeAuthorList()
      }
    })
  }

  const getLevelOptionsLoading = ref(false)
  const getLevelOptionsKeyword = ref('')
  const getLevelOptions = async () => {
    getLevelOptionsLoading.value = true
    const res = await levelPageSelect({
      limit: 0,
      name: getLevelOptionsKeyword.value,
      page: 0,
    })
    levelOptions.value = res.data.data.rows
    getLevelOptionsLoading.value = false
  }

  const getTypeOptionsLoading = ref(false)
  const getTypeOptionsKeyword = ref('')
  const getTypeOptions = async () => {
    getTypeOptionsLoading.value = true
    const res = await typePageSelect({ limit: 0, name: getTypeOptionsKeyword.value, page: 0 })
    typeOptions.value = res.data.data.rows
    getTypeOptionsLoading.value = false
  }

  // 更新公司知识库查看权限
  const onUpdateSelectKnowledgeAuthor = (val: boolean) => {
    updateSelectKnowledgeAuthor(route.params.id, { selectKnowledgeAuthor: val }).then((res) => {
      if (res.data.code == 20000) {
        selectKnowledgeAuthor.value = val
        userInfo.value.selectKnowledgeAuthor = val
      }
    })
  }

  // 根据公司分类ID获取知识库类型权限列表
  const getKnowledgeAuthorList = () => {
    getSelectKnowledgeAuthorList(userTypeId.value || '0', { page: 1, limit: 50 }).then((res) => {
      if (res.data.code == 20000) {
        knowledgeTableData.value = res.data.data.rows
      }
    })
  }

  // 公司表单数据
  const userForm = reactive({
    addrs: {
      province: '',
      city: '',
      area: '',
      town: '',
    },
    address: '',
    code: '',
    email: '',
    id: route.params.id,
    level: '',
    levelId: '',
    name: '',
    phone: '',
    status: true,
    title: '',
    userType: '',
    userTypeId: '',
  })

  // 验证规则
  const rules = reactive({
    name: [{ required: true, message: '请输入客户名称', trigger: ['blur', 'change'] }],
    phone: [
      { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
      { validator: phone(userForm.phone), trigger: ['blur', 'change'] },
    ],
    // userTypeId: [{ required: true, message: '请选择公司分类', trigger: ['blur', 'change'] }],
  })

  const onEditCustomerModalCancelClick = () => {
    addDialog.value = false
  }

  const addLoading = ref(false)
  const userFormRef = ref<FormInstance>()

  // 编辑信息
  const editInfo = async () => {
    addDialog.value = true
    addLoading.value = true
    userForm.title = '编辑公司信息'
    await getLevelOptions()
    await getTypeOptions()
    userForm.name = userInfo.value.name
    userForm.phone = userInfo.value.phone
    userForm.email = userInfo.value.email
    userForm.code = userInfo.value.code
    userForm.status = userInfo.value.status == 0 ? true : false
    userForm.userTypeId = userInfo.value.userTypeId === '0' ? '' : userInfo.value.userTypeId
    userForm.userType = userInfo.value.userType
    userForm.level = userInfo.value.level
    userForm.levelId = userInfo.value.levelId === '0' ? '' : userForm.levelId
    if (!typeOptions.value.some((o) => o.id == userInfo.value.userTypeId)) {
      getTypeOptions()
    }
    addLoading.value = false
  }
  const changeUserTypeId = (item) => {
    userForm.userType = item.name
  }
  const changeLevelId = (item) => {
    userForm.level = item.name
  }
  // 保存公司信息
  const saveData = (formEl: FormInstance | undefined) => {
    formEl.validate((valid) => {
      if (valid) {
        saveMethod(addUser, addDialog, addLoading)
      }
    })
  }

  // 保存的方法
  const saveMethod = (
    method: {
      (data: object): AxiosPromise<any>
      (arg0: {
        address: string
        area: any
        city: any
        code: string
        email: string
        id: string | string[]
        level: string
        levelId: string
        name: string
        phone: string
        province: any
        status: number
        town: any
        userType: string
        userTypeId: string
      }): Promise<any>
    },
    dialog: Ref<boolean>,
    load: Ref<boolean>,
  ) => {
    const data = {
      address: userForm.address,
      area: userForm.addrs.area,
      city: userForm.addrs.city,
      code: userForm.code,
      email: userForm.email,
      id: userForm.id,
      level: userForm.level,
      levelId: userForm.levelId,
      name: userForm.name,
      phone: userForm.phone,
      province: userForm.addrs.province,
      status: userForm.status ? 0 : 2,
      town: userForm.addrs.town,
      userType: userForm.userType,
      userTypeId: userForm.userTypeId,
    }
    load.value = true
    method(data).then((res: { data: { success: boolean; message: any } }) => {
      load.value = false
      ElMessage({
        message: res.data.message,
        type: res.data.success ? 'success' : 'error',
        duration: 5000,
        plain: true,
        showClose: true,
      })
      if (res.data.success) {
        dialog.value = false
        getInfo()
      }
    })
  }
  // 获取公司关联设备列表
  const UserRelationCodeGoodsList = ref({ rows: [], total: 0 })

  /**
   * 获取公司关联设备
   */
  const getUserRelationCodeGoodsListFun = async () => {
    if (goodListPaginationInstance.value) {
      loading.value = true
      const res = await getUserRelationCodeGoodsList(
        {
          limit: goodListPaginationInstance.value.size,
          page: goodListPaginationInstance.value.current,
        },
        route.params.id as string,
      )
      if (res.data.success) {
        UserRelationCodeGoodsList.value = {
          rows: res.data.data.rows,
          total: Number(res.data.data.total),
        }
      } else {
        HMessageBox.error(res.data.message)
      }
      loading.value = false
    }
  }

  // 获取公司关联工单列表
  const UserRelationOrderList = ref({ rows: [], total: 0 })
  const getUserRelationOrderListFun = async () => {
    let data = {
      limit: paginationOrder.value.pageSize,
      page: paginationOrder.value.current,
    }
    loading.value = true
    const res = await getUserRelationOrderList(data, route.params.id)
    if (res.data.success) {
      UserRelationOrderList.value = res.data.data
    } else {
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'error',
        duration: 5000,
        plain: true,
      })
    }
    loading.value = false
  }
  const name = ref('') // 客户名称
  const telphone = ref('') // 公司手机号
  const selfData = ref([]) // 联系人列表数据
  const selfDom = ref() // 联系人列表dom

  const paginDom = ref() // 分页dom
  const total = ref() // 总数目

  const fileList = ref([])

  // 获取联系人数据
  const getList = async (val = true) => {
    loading.value = true
    if (val) {
      paginDom.value.setPage()
    }
    const data = {
      limit: paginDom.value.size,
      name: name.value,
      page: paginDom.value.current,
      phone: telphone.value,
    }
    selfData.value = []
    await getUserContact(data, route.params.id).then((res) => {
      selfData.value = res.data.data.rows
      selfData.value.map((item) => {
        item['isEditUserContact'] = false
        item['isMainUser'] = item.mainContact
      })
      total.value = parseInt(res.data.data.total)
    })
    loading.value = false
  }

  // 获取表格选中的数据
  const selecttion = ref([])
  const userContactSelect = ref([])
  const getCheckbox = (val: any[]) => {
    userContactSelect.value = val
    if (val.length != 0) {
      val.forEach((item: { id: any }) => {
        if (Object.values(selecttion.value).indexOf(item.id) == -1) {
          selecttion.value.push(item.id)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item.id)
        }
      })
    } else {
      selecttion.value = []
    }
  }

  watch(
    () => userContactSelect.value,
    () => {
      userContactBatchDelBtn.value = true
      if (selecttion.value.length > 0) {
        userContactBatchDelBtn.value = false
      }
    },
  )

  // 判断是否可选
  const checkDisable = (row: { mainContact: boolean }) => {
    if (row.mainContact == true) {
      return false // 不可选
    } else {
      return true // 可选
    }
  }

  // 添加行
  const addLineData = () => {
    selfData.value.push({
      username: '',
      phone: '',
      mainContact: false,
      email: '',
      province: '',
      city: '',
      area: '',
      town: '',
      address: '',
      isEditUserContact: true,
    })
  }

  // 删除行
  const deleteLineData = (index: number, obj) => {
    if (obj.id) {
      changeCont('删除', obj, 0)
    } else {
      selfData.value = selfData.value.filter((o, i) => i != index)
    }
  }

  // 编辑联系人
  const onUserContainTableEdit = (obj: any) => {
    obj.isEditUserContact = true
  }

  // 保存联系人
  const onUserContainTableSave = (rowIndex: number, obj: any) => {
    if (!obj.username || obj.username.trim() === '') {
      HMessageBox.error(`第 ${rowIndex + 1} 行 [联系人姓名] 不能为空`)
      return
    }
    if (!obj.phone) {
      HMessageBox.error(`第 ${rowIndex + 1} 行 [联系人手机号] 不能为空`)
      return
    }
    if (!verifyPhone(obj.phone)) {
      HMessageBox.error(`第 ${rowIndex + 1} 行 [联系人手机号] 格式错误`)
      return
    }
    const addr = addrEditRef.value.getSelectAddr()
    // if (!addr.province || addr.province === '') {
    //   HMessageBox.error(`第 ${rowIndex + 1} 行 [联系地区] 不能为空`)
    //   return
    // }
    // if (!obj.address || obj.address === '') {
    //   HMessageBox.error(`第 ${rowIndex + 1} 行 [详细地址] 不能为空`)
    //   return
    // }
    saveContact(obj, addr)
  }

  // 取消编辑
  const onUserContainTableCancel = (rowIndex: number, obj: any) => {
    if (obj.id) {
      obj.isEditUserContact = false
      return
    }
    selfData.value.splice(rowIndex, 1)
  }

  // 保存联系人
  const saveContact = (obj: any, addr: any) => {
    let data = {
      id: obj.id,
      username: obj.username,
      phone: obj.phone,
      mainContact: obj.mainContact,
      province: addr.province,
      city: addr.city,
      area: addr.area,
      town: addr.town,
      address: obj.address,
      email: obj.email,
    }
    loading.value = true
    saveUserContact(data, route.params.id).then((res) => {
      loading.value = false
      ElMessage({
        message: res.data.message,
        type: res.data.success ? 'success' : 'error',
        duration: 5000,
        plain: true,
        showClose: true,
      })
      if (res.data.success == true) {
        obj.isEditUserContact = false
        getList()
      }
    })
  }

  // 修改联系人方法
  const changeCont = (type: string, obj: any, num: number) => {
    ElMessageBox({
      type: type === '删除' || type === '批量删除' ? 'error' : 'warning',
      title: '提示',
      message: `确认${type}选中的联系人?`,
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    })
      .then(async () => {
        if (type == '删除') {
          await deleteContact([obj.id]).then((res: any) => {
            ElMessage({
              message: res.data.message,
              type: 'success',
              duration: 5000,
              plain: true,
              showClose: true,
            })
          })
        }
        if (type == '批量删除') {
          await deleteContact(selecttion.value).then((res: any) => {
            ElMessage({
              message: res.data.message,
              type: 'success',
              duration: 5000,
              plain: true,
              showClose: true,
            })
          })
        }
        if (type == '更改') {
          changeContact(obj.id, route.params.id).then((res) => {
            ElMessage({
              message: res.data.message,
              type: 'success',
              duration: 5000,
              plain: true,
              showClose: true,
            })
          })
        }
        selfDom.value.clearSelection()
        getList()
      })
      .catch(() => {
        if (num == 1) {
          obj.mainContact = !obj.mainContact
        }
      })
  }

  // 批量删除联系人
  const deleAll = () => {
    if (selecttion.value.length == 0) {
      ElMessage({
        message: `请选择要删除的联系人`,
        type: 'warning',
        duration: 5000,
        plain: true,
        showClose: true,
      })
      return
    }
    changeCont('批量删除', '', 1)
  }

  // 上传附件
  const handleChange: UploadProps['onChange'] = (uploadFile: UploadFile) => {
    if (fileList.value.length >= 20) {
      ElMessage({
        type: 'error',
        duration: 5000,
        showClose: true,
        plain: true,
        message: '最多只能上传20个附件',
        grouping: true,
      })
      return
    }
    let { name } = uploadFile.raw
    let tmp = {
      id: null,
      name,
      path: window.URL.createObjectURL(uploadFile.raw),
      file: uploadFile.raw,
    }
    fileList.value.push(tmp)
  }

  // 删除附件
  const deleteItem = (index: number) => {
    fileList.value = fileList.value.filter((o, i) => {
      if (o.id && i == index) {
        delAnnexIds.value.push(o.id)
      }
      return i != index
    })
  }
  // 查看图片
  const file = ref({ file: null, type: '' }) //文件
  const dialogContract = ref(false) //文件查看弹窗
  const lookFile = (val, type) => {
    file.value = { file: val, type: type }
    dialogContract.value = true
  }
  // 根据公司ID获取公司附件
  const getUserFilt = async () => {
    loading.value = true
    await getUserAnnex(route.params.id).then((res) => {
      if (res.data.success) {
        fileList.value = res.data.data.row
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 5000,
          plain: true,
        })
      }
    })
    loading.value = false
  }
  // 取消
  const onCancel = () => {
    getUserFilt()
    delAnnexIds.value = []
  }
  // 保存附件
  const uploadAnnexLoading = ref(false)
  const annexSaveSubmit = async () => {
    uploadAnnexLoading.value = true
    let data = {
      annexVos: [],
      delAnnexIds: delAnnexIds.value,
    }
    let img = [] //已经上传过的
    let imgNew = [] //新上传的
    fileList.value.filter((o) => {
      if (o.id) {
        img.push(o)
      } else {
        imgNew.push(o.file)
      }
    })
    // 判断是否有新上传图片附件
    if (imgNew.length > 0) {
      const res = await userAnnexUpload(imgNew)
      imgNew = res.data.data.rows.map((o) => {
        return { id: null, path: o }
      })
    } else {
      if (delAnnexIds.value.length === 0) {
        HMessageBox.error('请选择要上传的图片附件！')
        uploadAnnexLoading.value = false
        return
      }
    }
    data.annexVos = [...img, ...imgNew]
    const res = await annexSave(data, route.params.id)
    if (res) {
      if (res.data.code == 20000) {
        getUserFilt()
        delAnnexIds.value = []
        HMessage.success('保存成功')
      } else {
        HMessageBox.error(res.data.message)
      }
    }
    uploadAnnexLoading.value = false
  }
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
